<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>













<script src="js/prettify.obus.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/branches/release-1-Jun-2011/src/lang-css.js"></script>
<!--
<link href="http://google-code-prettify.googlecode.com/svn/branches/release-1-Jun-2011/src/prettify.css" rel="stylesheet" type="text/css" />
-->
<style>
body{margin:0;padding:0;}
pre{margin:15px 0 5px;background:#fff;font:normal 13px Monaco, Courier, Courier New, Monospace;padding:10px;width:99%;overflow:auto;}

/* Pretty printing styles. Used with prettify.js. */

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: MediumBlue; color: black; }  /* plain text */

@media screen {
  .str { color: #080; }  /* string content */
  .kwd { color: #008; color: purple; }  /* a keyword */
  .com { color: #800; color: #aaa; font-style: italic; letter-spacing:-1px; }  /* a comment */
  .typ { color: #606 ; color: red; }  /* a type name */
  .lit { color: #066; color: green; color: crimson; }  /* a literal value nums value*/
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660; color: darkred; }
  .tag { color: #008; }  /* a markup tag name */
  .atn { color: #606; }  /* a markup attribute name */
  .atv { color: #080; color: forestgreen; color: Tomato;}  /* a markup attribute value */
  .dec, .var { color: #606; }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 10px; border: 1px solid #888; }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {margin-top:0;margin-bottom:0;} /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {list-style-type:decimal;}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {background:lightblue;background:WhiteSmoke ;}
ol.linenums li{border-left:10px solid lightblue;padding-left:10px;}
</style>
</head>


<body><!-- <body onload="prettyPrint(); adjustHeightInParent()"> -->
<!--
<div style="width: 40em; display: inline-block">
-->

<pre class="prettyprint lang-css linenums">/* css code */
#mybox {
    width: 40%;
    height: 300px;
    color: #fff;
    background: black;
    border-radius: 1em;
    animation: anima infinite 1s linear;
    -o-animation: anima infinite 1s linear;
    -ms-animation: anima infinite 1s linear;
    -moz-animation: anima infinite 1s linear;
    -webkit-animation: anima infinite 1s linear;
}
#mybox:hover {
    transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -o-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -ms-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -moz-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -webkit-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
}
@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-o-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-ms-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-moz-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-webkit-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
a, #mybox {
    transition: 1.2s;
    -o-transition: 1.2s;
    -ms-transition: 1.2s;
    -moz-transition: 1.2s;
    -webkit-transition: 1.2s;
}</pre>

<pre class="prettyprint lang-js linenums">&lt;script type="text/javascript"&gt;
function appendDecorations(basePos, sourceCode, langHandler, out) {
    if (!sourceCode) { return; }
    var job = {
      sourceCode: sourceCode,
      basePos: basePos
    };
    langHandler(job);
    out.push.apply(out, job.decorations);
  }

  var notWs = /\S/;
  function childContentWrapper(element) {
    var wrapper = undefined;
    for (var c = element.firstChild; c; c = c.nextSibling) {
      var type = c.nodeType;
      wrapper = (type === 1)  // Element Node
          ? (wrapper ? element : c)
          : (type === 3)  // Text Node
          ? (notWs.test(c.nodeValue) ? element : wrapper)
          : wrapper;
    }
    return wrapper === element ? undefined : wrapper;
  }&lt;/script&gt;</pre>

<pre class="prettyprint lang-html linenums">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Kucing Garong&lt;/title&gt;

&lt;style type=&quot;text/css&quot;&gt;

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Push Meong&lt;/h2&gt;
&lt;p class=&quot;meong&quot;&gt;
&lt;a href=&quot;http://gubhugcss.blogspot.com&quot; target=&quot;_blank&quot; title=&quot;Ciluk....., baaaaa....!!!!!&quot;&gt;&lt;img src=&quot;https://lh6.googleusercontent.com/-QYGyo4MaOD4/UDAZ-88GC7I/AAAAAAAAAMw/IP-xTZN5NFg/s120/gambar-kucing-300x300.jpg&quot; width=&quot;120&quot; height=&quot;120&quot; alt=&quot;Kucing garong&quot; /&gt;&lt;/a&gt;
    Kucing Garong
&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<pre class="prettyprint lang-js linenums">
// Javascript
function helloWorld(world) {
  for (var i = 42; --i &gt;= 0;) {
    alert('Hello ' + String(world));
  }
}</pre>

<pre class="prettyprint lang-html linenums">
&lt;script type="text/javascript"&gt;
// Javascript
function helloWorld(world) {
  for (var i = 42; --i &gt;= 0;) {
    alert('Hello ' + String(world));
  }
}
&lt;/script&gt;

&lt;style type="text/css" media="screen"&gt;
/* css code */
#mybox {
    width: 40%;
    height: 300px;
    color: #fff;
    background: black;
    border-radius: 1em;
    animation: anima infinite 1s linear;
    -o-animation: anima infinite 1s linear;
    -ms-animation: anima infinite 1s linear;
    -moz-animation: anima infinite 1s linear;
    -webkit-animation: anima infinite 1s linear;
}
#mybox:hover {
    transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -o-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -ms-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -moz-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
    -webkit-transform: translate(5px, 10px) rotate(10deg) scale(1.4);
}
@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-o-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-ms-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-moz-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
-webkit-@keyframes anima {
    0% {color: red}
    100% {color: yellow}
}
a, #mybox {
    transition: 1.2s;
    -o-transition: 1.2s;
    -ms-transition: 1.2s;
    -moz-transition: 1.2s;
    -webkit-transition: 1.2s;
}
p {
    color: pink;
}
b {
    color: blue;
}
&lt;/style&gt;</pre>


<!--
</div>
-->




<script>
prettyPrint(); 
adjustHeightInParent()
</script>
</body>
</html>

<!--
<script src="http://www.gstatic.com/codesite/ph/16186173366037945081/js/prettify/prettify.js"></script>
<script type="text/javascript">
prettyPrint();
</script>

<script src="http://google-code-prettify.googlecode.com/svn/branches/release-1-Jun-2011/js-modules/prettify.js type="text/javascript"></script>
<script src="js/gcode_prettify.js" type="text/javascript"></script>



<script src="js/prettify.obus.js" type="text/javascript"></script>

<script type="text/javascript">
    prettyPrint();
</script>

-->